<template>
	<navigator :url="`/pages/detail/index?id=${item.topic_id}&title=${item.title}`" class="list-item">
		<view class="list-item-content">
			<view class="list-iteml">
				<view class="item-h2">
					<text class="item-text">
						<!-- #ifdef MP-TOUTIAO -->
						<text class="item-text-tip">【仅供娱乐】</text>
						<!-- #endif -->
					{{item.title}}
					</text>
				</view>
				<view class="item-desc">
					<text>{{item.description}}</text>
				</view>
				<view class="item-linear">
					<!-- <view class="item-price">免费</view> -->
					<view class="item-nums" v-if="tab == 1">{{item.game_count}}人在测</view>
					<view class="item-nums" v-else>{{item.play_time}}</view>
				</view>
			</view>
			<view class="list-itemr">
				<image :src="item.banner_img" mode="scaleToFill"></image>
			</view>
		</view>
	</navigator>
</template>

<script>
	export default {
		props: [
			'tab',
			'item'
		]
	}
</script>

<style lang="scss" scoped>
	$white: #fff;
	$gray: #666;
	$orange: #ff5d38;
	$label: #aaa;
	.list-item {
		border-bottom: 2rpx solid #f1f1f1;
	}
	.list-item-content {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background-color: $white;
		.list-iteml {
			flex: 1;
			min-width: 0;
			.item-h2 {
				height: 48rpx;
				line-height: 48rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
				overflow: hidden;
				font-weight: bold;
				image {
					width: 60rpx;
					height: 48rpx;
					margin-left: 10rpx;
					vertical-align: middle;
				}
				.item-text {
					font-size: 34rpx;
					vertical-align: middle;
					.item-text-tip{
						font-size: 24rpx;
					}
				}
				.item-label {
					font-size: 28rpx;
					border-radius: 6rpx;
					background-color: $orange;
					padding: 0 6rpx;
					color: $white;
					vertical-align: middle;
					margin-left: 10rpx;
				}
			}
			.item-desc {
				font-size: 26rpx;
				line-height: 30rpx;
				height: 60rpx;
				overflow: hidden;
				color: $gray;
				margin: 16rpx 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.item-nums {
				font-size: 24rpx;
				color: $label;
			}
		}
		.list-itemr {
			border-radius: 8rpx;
			overflow: hidden;
			width: 180rpx;
			height: 180rpx;
			margin-left: 60rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.item-linear {
		display: flex;
		align-items: center;
		.item-price {
			flex: 1;
			color: orange;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
</style>